<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="qrc:/resources/web/echarts.min.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: transparent !important;
        }

        #chart {
            width: 100%;
            height: 100%;
            min-width: 100px;
            min-height: 100px;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
<div id="chart"></div>
<script>
    var myChart = echarts.init(document.getElementById('chart'));
    var chartData = {};

    // 系列索引映射表（用于增量渲染）
    var seriesIndexMap = {};

    // 用户交互状态
    var userInteracted = false;
    var currentView = {xStart: 0, xEnd: 100};

    // 初始坐标轴范围
    var initialXAxisMin = 0;
    var initialXAxisMax = 10000; // 初始X轴范围：0-10秒
    var initialYAxisMin = -100000;
    var initialYAxisMax = 100000;  // 初始Y轴范围：-100000到100000

    // 当前Y轴范围（可能会因数据扩容而改变）
    var currentYAxisMin = initialYAxisMin;
    var currentYAxisMax = initialYAxisMax;

    // 添加尺寸监控变量
    let lastWidth = 0;
    let lastHeight = 0;
    let resizeScheduled = false;

    // Y轴是否已调整过范围
    var yAxisAdjusted = false;

    var symbolVisible = false; // 默认不显示数据点符号

    // 添加通道来源跟踪
    var channelSources = {}; // 记录通道来源：'manual' 或 'imported'

    // 默认配置
    var option = {
        animation: false, // 禁用动画以提高重绘性能
        title: {
            text: 'iKUN示波器',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                var result = '时间: ' + params[0].data[0] + 'ms<br/>';
                params.forEach(function (item) {
                    result += item.seriesName + ': ' + item.data[1].toFixed(2) + '<br/>';
                });
                return result;
            }
        },
        legend: {
            data: [],
            top: 30
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '10%',
            top: '15%',
            containLabel: true
        },
        toolbox: {
            feature: {
                // 添加自定义工具用于控制数据点符号显示
                mySymbolTool: {
                    show: true,
                    title: '显示数据点符号',
                    // 替换为更形象的图标
                    icon: 'path://M12,2C8.13,2 5,5.13 5,9c0,5.25 7,13 7,13s7,-7.75 7,-13C19,5.13 15.87,2 12,2zM12,11.5c-1.38,0 -2.5,-1.12 -2.5,-2.5s1.12,-2.5 2.5,-2.5 2.5,1.12 2.5,2.5 -1.12,2.5 -2.5,2.5z',
                    emphasis: {
                        iconStyle: {
                            color: '#1a73e8',
                            borderColor: '#1a73e8',
                            borderWidth: 2
                        }
                    },
                    onclick: function () {
                        toggleSymbolVisibility();
                    }
                },
                dataZoom: {yAxisIndex: 'none'},
                magicType: {type: ['line', 'bar']}
            }
        },
        xAxis: {
            type: 'value',
            name: '时间(ms)',
            nameLocation: 'middle',
            nameGap: 30,
            min: initialXAxisMin,
            max: initialXAxisMax,
            interval: 2000,  // 添加初始刻度间隔
            axisLabel: {
                formatter: function (value) {
                    // 整数化X轴标签
                    return Math.round(value) === value ? value : Math.round(value);
                }
            }
        },
        yAxis: {
            type: 'value',
            name: '',
            nameLocation: 'middle',
            nameGap: 50,
            min: currentYAxisMin,
            max: currentYAxisMax,
            axisLabel: {
                formatter: function (value) {
                    // 整数化Y轴标签
                    return Math.round(value) === value ? value : value.toFixed(1);
                }
            },
            // 添加刻度间隔设置
            interval: 20000  // 初始刻度间隔调整为20000
        },
        dataZoom: [
            {
                type: 'inside',
                xAxisIndex: [0],
                start: 0,
                end: 100,
                zoomOnMouseWheel: true,
                moveOnMouseMove: true,
                preventDefaultMouseMove: false, // 允许鼠标移动事件
                throttle: 50 // 添加节流控制
            },
            {
                show: true,
                xAxisIndex: [0],
                type: 'slider',
                top: '90%',
                start: 0,
                end: 100,
                throttle: 50 // 添加节流控制
            }
        ],
        series: []
    };

    myChart.setOption(option);

    let lastZoomTime = 0;
    const ZOOM_THROTTLE_TIME = 100; // 100ms节流

    // 修改dataZoom事件监听器，添加一个标志表示用户当前是否正在交互
    let isUserZooming = false;

    myChart.on('dataZoom', function (params) {
        const now = Date.now();
        if (now - lastZoomTime < ZOOM_THROTTLE_TIME) {
            return;
        }
        lastZoomTime = now;

        const zoomRange = params.batch ?
            (params.batch[0].end - params.batch[0].start) :
            (params.end - params.start);

        console.log(`缩放范围: ${zoomRange}%`);

        // 只有当缩放范围小于98%时才认为是用户交互
        if (zoomRange < 98) {
            userInteracted = true;
            isUserZooming = true;
            console.log('用户交互模式');
        } else {
            // 接近全局视图时，重置交互状态
            userInteracted = false;
            isUserZooming = false;
            console.log('全局视图模式');
        }

        if (params.batch) {
            currentView.xStart = params.batch[0].start;
            currentView.xEnd = params.batch[0].end;
        } else {
            currentView.xStart = params.start;
            currentView.xEnd = params.end;
        }

        // 使用requestAnimationFrame进行异步更新
        requestAnimationFrame(() => {
            updateYAxisBasedOnVisibleData();
            setTimeout(() => {
                isUserZooming = false;
            }, 100);
        });
    });

    // 监听还原事件
    myChart.on('restore', function () {
        userInteracted = false;
        // 还原时重置Y轴到初始范围
        resetYAxisToInitial();
    });

    // 重置Y轴到初始范围
    function resetYAxisToInitial() {
        currentYAxisMin = initialYAxisMin;
        currentYAxisMax = initialYAxisMax;
        yAxisAdjusted = false;

        myChart.setOption({
            yAxis: {
                min: initialYAxisMin,
                max: initialYAxisMax,
                interval: 20000
            }
        });
    }

    // 添加切换符号显示的函数
    function toggleSymbolVisibility() {
        symbolVisible = !symbolVisible;

        var currentOption = myChart.getOption();

        // 更新所有系列的symbol设置
        currentOption.series.forEach(function (series, index) {
            series.symbol = symbolVisible ? 'circle' : 'none';
            series.symbolSize = symbolVisible ? 3 : 0;
        });

        // 动态更新工具箱图标状态
        currentOption.toolbox[0].feature.mySymbolTool.iconStyle = {
            color: symbolVisible ? '#37A2DA' : '#666',
            borderColor: symbolVisible ? '#37A2DA' : 'transparent',
            borderWidth: symbolVisible ? 1 : 0,
            backgroundColor: symbolVisible ? 'rgba(55, 162, 218, 0.1)' : 'transparent'
        };

        // 动态更新工具提示标题
        currentOption.toolbox[0].feature.mySymbolTool.title = symbolVisible ? '隐藏数据点符号' : '显示数据点符号';

        // 更新图表配置
        myChart.setOption(currentOption);

        // 更新工具箱图标状态（可选）
        var toolIcon = document.querySelector('.toolbox-symbol-tool');
        if (toolIcon) {
            toolIcon.style.opacity = symbolVisible ? '1' : '0.5';
        }
    }

    // 根据当前可见数据更新Y轴范围 - 修复滑动条问题
    function updateYAxisBasedOnVisibleData() {
        try {
            // 获取当前dataZoom的状态
            const option = myChart.getOption();
            const dataZoom = option.dataZoom[0];
            const zoomStart = dataZoom.start || 0;
            const zoomEnd = dataZoom.end || 100;

            // 计算缩放比例
            const zoomRange = zoomEnd - zoomStart;

            // 如果滑动条显示接近全部范围（>98%），恢复默认Y轴刻度
            if (zoomRange > 98) {
                console.log('恢复默认Y轴刻度');
                // 恢复到默认的Y轴范围和刻度
                myChart.setOption({
                    yAxis: {
                        min: initialYAxisMin,
                        max: initialYAxisMax,
                        interval: 20000
                    }
                });
                return;
            }

            console.log('使用可见范围数据计算Y轴范围');

            let minY = Infinity;
            let maxY = -Infinity;
            let hasVisibleData = false;

            // 获取当前视图的X轴范围
            const xAxisModel = myChart.getModel().getComponent('xAxis', 0);
            if (!xAxisModel) return;

            const axis = xAxisModel.axis;
            if (!axis || !axis.scale) return;

            const visibleMinX = axis.scale.getExtent()[0];
            const visibleMaxX = axis.scale.getExtent()[1];

            // 使用高效算法：只检查可见范围内的点
            for (const seriesName in chartData) {
                const data = chartData[seriesName];
                if (!data || data.length === 0) continue;

                for (let i = 0; i < data.length; i++) {
                    const point = data[i];
                    const xValue = point[0];
                    const yValue = point[1];

                    // 检查点是否在可见范围内
                    if (xValue >= visibleMinX && xValue <= visibleMaxX) {
                        if (yValue < minY) minY = yValue;
                        if (yValue > maxY) maxY = yValue;
                        hasVisibleData = true;
                    }
                }
            }

            // 如果没有可见数据，则返回
            if (!hasVisibleData) {
                console.log('没有找到可见数据');
                return;
            }

            console.log(`Y轴数据范围: ${minY} ~ ${maxY}`);

            // 扩展Y轴范围10%，以便显示完整波形
            const yRange = maxY - minY;
            const padding = Math.max(yRange * 0.1, 1); // 至少1个单位的padding
            let newMinY = minY - padding;
            let newMaxY = maxY + padding;

            // 确保只显示第一和第四象限
            if (minY >= 0 && maxY >= 0) {
                newMinY = Math.max(0, newMinY);
            } else if (minY < 0 && maxY < 0) {
                newMaxY = Math.min(0, newMaxY);
            }

            // 调整Y轴范围，确保刻度值为整数
            newMinY = Math.floor(newMinY);
            newMaxY = Math.ceil(newMaxY);

            // 确保Y轴有合理的范围
            if (newMaxY - newMinY < 1) {
                newMaxY = newMinY + 1;
            }

            const maxAbsValue = Math.max(Math.abs(newMinY), Math.abs(newMaxY));
            const yAxisInterval = calculateYAxisInterval(maxAbsValue);

            console.log(`更新Y轴范围: ${newMinY} ~ ${newMaxY}, 间隔: ${yAxisInterval}`);

            // 更新Y轴范围
            myChart.setOption({
                yAxis: {
                    min: newMinY,
                    max: newMaxY,
                    interval: yAxisInterval
                }
            });
        } catch (e) {
            console.error('更新Y轴时出错:', e);
        }
    }

    // 检查并更新Y轴范围以适应新数据
    function checkAndUpdateYAxisRange(points) {
        if (!points || points.length === 0) return false;

        let needUpdate = false;
        let maxAbsValue = Math.max(Math.abs(currentYAxisMin), Math.abs(currentYAxisMax));

        // 检查所有新数据点的绝对值
        for (const point of points) {
            const absValue = Math.abs(point[1]);
            if (absValue > maxAbsValue) {
                maxAbsValue = absValue;
                needUpdate = true;
            }
        }

        if (needUpdate) {
            // 计算新的刻度间隔
            const yAxisInterval = calculateYAxisInterval(maxAbsValue);

            // 设置对称的Y轴范围：正负各5个刻度
            const newMaxY = yAxisInterval * 5;
            const newMinY = -yAxisInterval * 5;

            // 更新当前Y轴范围
            currentYAxisMin = newMinY;
            currentYAxisMax = newMaxY;

            // 更新图表Y轴
            myChart.setOption({
                yAxis: {
                    min: newMinY,
                    max: newMaxY,
                    interval: yAxisInterval,
                    axisLabel: {
                        formatter: function (value) {
                            return Math.round(value) === value ? value : value.toFixed(1);
                        }
                    }
                }
            });

            console.log(`Y轴范围已扩展: ${newMinY} ~ ${newMaxY}, 间隔: ${yAxisInterval}`);
        }

        return needUpdate;
    }

    function calculateXAxisInterval(maxValue) {
        // 默认刻度值为 2000, 4000, 6000, 8000, 10000
        let interval = 2000;

        // 动态调整刻度间隔，确保最大值能被包含
        while (interval * 5 < maxValue) {
            if (interval % 10000 === 0) {
                if ((interval / 10000) % 5 === 0) {
                    interval = interval * 2;   // 50000 -> 100000
                } else if ((interval / 10000) % 2 === 0) {
                    interval = interval * 2.5; // 20000 -> 50000
                } else {
                    interval = interval * 2;   // 10000 -> 20000
                }
            } else if (interval % 5000 === 0) {
                interval = interval * 2;       // 5000 -> 10000
            } else if (interval % 2000 === 0) {
                interval = interval * 2.5;     // 2000 -> 5000
            } else {
                interval = interval * 2.5;     // 保持 2000 序列
            }
        }

        return interval;
    }

    // 固定显示正负各5个刻度，0值单独显示
    function calculateYAxisInterval(maxAbsValue) {
        // 确保正负半轴各有5个刻度值，0值单独显示
        let interval = 1;
        const targetTickCount = 5; // 正负半轴各5个刻度

        // 动态调整刻度间隔，确保最大绝对值能被包含在5个刻度内
        while (interval * targetTickCount < maxAbsValue) {
            // 按照常见数值序列进行调整: 1, 2, 5, 10, 20, 50, 100, 200, 500, 1000...
            if (interval % 10 === 0) {
                if ((interval / 10) % 5 === 0) {
                    interval = interval * 2;  // 50 -> 100, 500 -> 1000
                } else if ((interval / 10) % 2 === 0) {
                    interval = interval * 2.5; // 20 -> 50, 200 -> 500
                } else {
                    interval = interval * 2;   // 10 -> 20, 100 -> 200
                }
            } else if (interval % 5 === 0) {
                interval = interval * 2;       // 5 -> 10
            } else if (interval === 2) {
                interval = 5;                  // 2 -> 5
            } else {
                interval = interval * 2;       // 1 -> 2
            }
        }

        return interval;
    }

    // 添加示例数据标志
    var hasRealData = false;

    // 显示示例坐标轴数据
    function showExampleData() {
        if (hasRealData) return;

        var exampleOption = {
            xAxis: {
                type: 'value',
                name: '时间(ms)',
                nameLocation: 'middle',
                nameGap: 30,
                min: initialXAxisMin,
                max: initialXAxisMax,
                interval: 2000
            },
            yAxis: {
                type: 'value',
                name: '',
                nameLocation: 'middle',
                nameGap: 50,
                min: currentYAxisMin,
                max: currentYAxisMax,
                interval: 20000,
                axisLabel: {
                    formatter: function (value) {
                        // 整数化Y轴标签
                        return Math.round(value) === value ? value : value.toFixed(1);
                    }
                }
            }
        };
        myChart.setOption(exampleOption);
    }

    // 初始显示示例
    setTimeout(showExampleData, 100);

    // 增强的尺寸监控逻辑
    function checkSizeChange() {
        const chartDiv = document.getElementById('chart');
        if (!chartDiv) return;

        const currentWidth = chartDiv.clientWidth;
        const currentHeight = chartDiv.clientHeight;

        // 尺寸未变化或变化过小则忽略
        if (Math.abs(currentWidth - lastWidth) < 2 &&
            Math.abs(currentHeight - lastHeight) < 2) {
            return;
        }

        lastWidth = currentWidth;
        lastHeight = currentHeight;

        if (myChart && !myChart.isDisposed()) {
            try {
                myChart.resize();
                console.log(`图表重绘完成 (${currentWidth}x${currentHeight})`);
            } catch (e) {
                console.error('重绘失败:', e);
            }
        }
    }

    // 使用requestAnimationFrame进行高效监控
    function monitorSizeChanges() {
        if (!document.hidden) {
            checkSizeChange();
        }
        requestAnimationFrame(monitorSizeChanges);
    }

    // 启动尺寸监控
    requestAnimationFrame(monitorSizeChanges);

    // 保留窗口resize监听作为备用
    window.addEventListener('resize', function () {
        if (!resizeScheduled) {
            resizeScheduled = true;
            requestAnimationFrame(function () {
                checkSizeChange();
                resizeScheduled = false;
            });
        }
    });

    // 初始尺寸记录
    setTimeout(() => {
        const chartDiv = document.getElementById('chart');
        if (chartDiv) {
            lastWidth = chartDiv.clientWidth;
            lastHeight = chartDiv.clientHeight;
        }
    }, 500);

    // Qt调用的接口 - 添加新的数据系列
    // 修改Qt调用的接口 - 添加新的数据系列函数
    function addSeries(name, color, source = 'manual') {
        // 标记有真实数据，清除示例
        if (!hasRealData) {
            hasRealData = true;
        }

        if (!chartData[name]) {
            chartData[name] = [];

            // 生成示例数据
            for (let i = 0; i < 1; i++) {
                let time = i * 20;
                chartData[name].push([time, 0]);
            }
        }
        // 记录通道来源
        channelSources[name] = source;

        var currentOption = myChart.getOption();
        var seriesExists = currentOption.series.some(function (series) {
            return series.name === name;
        });

        if (!seriesExists) {
            currentOption.legend[0].data.push(name);

            // 创建新系列配置（启用增量渲染）
            const newSeries = {
                name: name,
                type: 'line',
                data: chartData[name],
                lineStyle: {color: color, width: 1},
                symbol: symbolVisible ? 'circle' : 'none', // 根据当前状态设置
                symbolSize: 3, // 设置数据点大小
                smooth: false, // 禁用平滑曲线提高性能
                animation: false,
                large: true,   // 启用大数据优化模式
                progressive: 1000, // 增量渲染阈值
                progressiveThreshold: 2000 // 超过2000点启用增量渲染
            };

            currentOption.series.push(newSeries);

            // 记录系列索引
            seriesIndexMap[name] = currentOption.series.length - 1;

            myChart.setOption(currentOption);
        }
    }

    // 设置指定系列的完整数据
    function setSeriesData(seriesName, data) {
        chartData[seriesName] = data;

        var currentOption = myChart.getOption();

        // 更新指定系列的数据
        var updated = false;
        currentOption.series.forEach(function (series) {
            if (series.name === seriesName) {
                series.data = data;
                updated = true;
            }
        });

        if (!updated) {
            console.error('未找到系列:', seriesName);
            console.log('当前系列列表:', currentOption.series.map(s => s.name));
        }

        // 检查并更新Y轴范围
        checkAndUpdateYAxisRange(data);

        // 强制刷新图表
        myChart.setOption(currentOption, true);
    }

    // 添加数据点到指定系列 - 优化为增量渲染
    function addDataPoint(seriesName, timestamp, value) {
        if (!chartData[seriesName]) {
            chartData[seriesName] = [];
        }

        // 确保时间戳非负
        timestamp = Math.max(0, timestamp);

        const newPoint = [timestamp, value];
        chartData[seriesName].push(newPoint);

        // 检查并更新Y轴范围
        checkAndUpdateYAxisRange([newPoint]);

        // 使用增量渲染API
        const seriesIndex = seriesIndexMap[seriesName];
        if (seriesIndex !== undefined) {
            try {
                myChart.appendData({
                    seriesIndex: seriesIndex,
                    data: [newPoint]
                });
            } catch (e) {
                console.error('增量渲染失败，回退到全量更新:', e);
                updateChart();
            }
        } else {
            updateChart();
        }

        // 自动调整视图（仅在超出初始范围时）
        autoAdjustView(seriesName);
    }

    // 批量添加多个数据点 - 优化为增量渲染
    function addDataPoints(seriesName, points) {
        if (!chartData[seriesName]) {
            chartData[seriesName] = [];
        }

        // 确保时间戳非负
        points = points.map(p => [Math.max(0, p[0]), p[1]]);

        // 添加数据点
        chartData[seriesName] = chartData[seriesName].concat(points);

        // 限制数据点数量（最多5000点）
        const MAX_POINTS = 5000;
        if (chartData[seriesName].length > MAX_POINTS) {
            chartData[seriesName] = chartData[seriesName].slice(-MAX_POINTS);
        }

        // 检查并更新Y轴范围
        checkAndUpdateYAxisRange(points);

        // 使用增量渲染API
        const seriesIndex = seriesIndexMap[seriesName];
        if (seriesIndex !== undefined) {
            try {
                myChart.appendData({
                    seriesIndex: seriesIndex,
                    data: points
                });
            } catch (e) {
                console.error('增量渲染失败，回退到全量更新:', e);
                updateChart();
            }
        } else {
            updateChart();
        }

        // 自动调整视图（仅在超出初始范围时）
        autoAdjustView(seriesName);
    }

    // 修改batchAddDataPoints函数
    function batchAddDataPoints(seriesData) {
        // 批量更新系列数据
        for (const seriesName in seriesData) {
            if (seriesData.hasOwnProperty(seriesName)) {
                let points = seriesData[seriesName];

                // 确保时间戳非负
                points = points.map(p => [Math.max(0, p[0]), p[1]]);

                // 确保系列存在
                if (!chartData[seriesName]) {
                    chartData[seriesName] = [];
                }

                // 添加数据点
                chartData[seriesName] = chartData[seriesName].concat(points);

                // 限制数据点数量（最多5000点）
                const MAX_POINTS = 5000;
                if (chartData[seriesName].length > MAX_POINTS) {
                    chartData[seriesName] = chartData[seriesName].slice(-MAX_POINTS);
                }

                // 检查并更新Y轴范围
                checkAndUpdateYAxisRange(points);

                // 使用增量渲染API
                const seriesIndex = seriesIndexMap[seriesName];
                if (seriesIndex !== undefined) {
                    try {
                        myChart.appendData({
                            seriesIndex: seriesIndex,
                            data: points
                        });
                    } catch (e) {
                        console.error('增量渲染失败，回退到全量更新:', e);
                        updateChart();
                    }
                }

                checkAndUpdateXAxisRange(seriesName, points);

                // 自动调整视图（现在即使用户交互过也会更新坐标轴范围）
                autoAdjustView(seriesName);
            }
        }
    }

    // 添加一个专门用于检查和更新X轴范围的函数
    function checkAndUpdateXAxisRange(seriesName, points) {
        // 如果用户没有手动交互，检查是否有数据点超出当前X轴范围
        if (!userInteracted && points.length > 0) {
            // 找到这批数据中的最大时间戳
            const maxTimestamp = Math.max(...points.map(p => p[0]));

            // 如果最大时间戳超出当前X轴最大值，则更新X轴范围
            if (maxTimestamp > initialXAxisMax) {
                const xRange = initialXAxisMax - initialXAxisMin;
                // 扩展X轴范围，增加20%的边距
                initialXAxisMax = maxTimestamp + xRange * 0.2;

                const xAxisInterval = calculateXAxisInterval(initialXAxisMax);

                // 立即更新X轴范围
                myChart.setOption({
                    xAxis: {
                        max: initialXAxisMax,
                        interval: xAxisInterval,
                        axisLabel: {
                            formatter: function (value) {
                                // 整数化X轴标签
                                return Math.round(value) === value ? value : Math.round(value);
                            }
                        }
                    }
                });
            }
        }
    }

    // 修改自动调整视图范围函数
    function autoAdjustView(seriesName) {
        const data = chartData[seriesName];
        if (!data || data.length === 0) return;

        // 只检查最近的点（优化性能）
        const startIdx = Math.max(0, data.length - 500);
        let minX = Infinity;
        let maxX = -Infinity;

        for (let i = startIdx; i < data.length; i++) {
            const point = data[i];
            if (point[0] < minX) minX = point[0];
            if (point[0] > maxX) maxX = point[0];
        }

        // 确保X轴从0开始
        minX = Math.max(0, minX);

        // 检查是否需要更新X轴
        let needUpdateX = false;

        // 检查当前缩放状态
        const option = myChart.getOption();
        const dataZoom = option.dataZoom[0];
        const zoomRange = (dataZoom.end || 100) - (dataZoom.start || 0);

        // 如果当前是全局视图（缩放范围>95%），或者用户没有交互过，则允许自动调整
        const allowAutoAdjust = zoomRange > 95 || !userInteracted;

        // 检查是否超出当前X轴范围
        if (allowAutoAdjust && (maxX > initialXAxisMax || minX < initialXAxisMin)) {
            needUpdateX = true;
            // 扩展X轴范围
            const xRange = maxX - minX;
            // 如果是新数据导致的范围扩展，只扩展最大值
            if (maxX > initialXAxisMax) {
                initialXAxisMax = maxX + xRange * 0.1;
            }
            if (minX < initialXAxisMin) {
                initialXAxisMin = Math.max(0, minX - xRange * 0.1);
            }
        }

        if (needUpdateX) {
            const updateOption = {};
            // 计算X轴刻度间隔
            const xAxisInterval = calculateXAxisInterval(initialXAxisMax);

            updateOption.xAxis = {
                min: initialXAxisMin,
                max: initialXAxisMax,
                interval: xAxisInterval,
                axisLabel: {
                    formatter: function (value) {
                        return Math.round(value) === value ? value : Math.round(value);
                    }
                }
            };

            // 更新坐标轴范围
            myChart.setOption(updateOption);
        }
    }

    // 更新图表显示（保留原有逻辑，但添加防抖机制）
    let updateTimer = null;

    function updateChart() {
        // 使用防抖机制减少更新频率
        if (updateTimer) clearTimeout(updateTimer);

        updateTimer = setTimeout(() => {
            var currentOption = myChart.getOption();

            // 更新每个系列的数据
            currentOption.series.forEach(function (series) {
                if (chartData[series.name]) {
                    series.data = chartData[series.name];
                }
            });

            myChart.setOption(currentOption, false, false);
            updateTimer = null;
        }, 20); // 约50FPS
    }

    // 清除所有数据
    function clearAllData() {
        // 获取当前图表配置
        var currentOption = myChart.getOption();

        // 分别处理手动创建和导入的通道
        var seriesToKeep = [];
        var legendToKeep = [];
        var newSeriesIndexMap = {};

        // 遍历现有系列，保留手动创建的通道
        currentOption.series.forEach(function (series) {
            const seriesName = series.name;

            if (channelSources[seriesName] === 'manual') {
                // 手动创建的通道：清空数据但保留通道
                chartData[seriesName] = [];
                series.data = [];
                seriesToKeep.push(series);
                legendToKeep.push(seriesName);
                newSeriesIndexMap[seriesName] = seriesToKeep.length - 1;
            } else {
                // 导入的通道：完全移除
                if (chartData[seriesName]) {
                    delete chartData[seriesName];
                }
                if (channelSources[seriesName]) {
                    delete channelSources[seriesName];
                }
            }
        });

        // 更新系列索引映射
        seriesIndexMap = newSeriesIndexMap;

        // 更新图表配置
        myChart.setOption({
            series: seriesToKeep,
            legend: [{
                data: legendToKeep,
                top: 30
            }]
        }, {replaceMerge: ['series', 'legend']});

        // 重置坐标轴范围到初始值
        initialXAxisMin = 0;
        initialXAxisMax = 10000;
        currentYAxisMin = initialYAxisMin;
        currentYAxisMax = initialYAxisMax;

        // 重置Y轴相关状态
        if (seriesToKeep.length === 0) {
            hasRealData = false;
        }
        userInteracted = false;
        yAxisAdjusted = false;

        // 重置坐标轴显示范围
        myChart.setOption({
            xAxis: {
                min: initialXAxisMin,
                max: initialXAxisMax
            },
            yAxis: {
                min: currentYAxisMin,
                max: currentYAxisMax,
                interval: 20000
            }
        });

        // 如果没有保留的系列，重新显示示例数据
        if (seriesToKeep.length === 0) {
            setTimeout(showExampleData, 100);
        }
    }

    // 移除系列
    function removeSeries(seriesName) {
        // 清除通道数据
        if (chartData[seriesName]) {
            chartData[seriesName] = [];
            delete chartData[seriesName];
        }

        // 删除索引映射
        if (seriesIndexMap[seriesName]) {
            delete seriesIndexMap[seriesName];
        }

        var currentOption = myChart.getOption();

        // 从图例中移除
        var legendIndex = currentOption.legend[0].data.indexOf(seriesName);
        if (legendIndex > -1) {
            currentOption.legend[0].data.splice(legendIndex, 1);
        }

        // 从系列中移除
        currentOption.series = currentOption.series.filter(function (series) {
            return series.name !== seriesName;
        });

        // 更新图表，确保完全清除曲线
        myChart.setOption({
            series: currentOption.series,
            legend: currentOption.legend
        }, {replaceMerge: ['series', 'legend']});

        // 如果没有剩余系列，重置状态
        if (currentOption.series.length === 0) {
            hasRealData = false;
            userInteracted = false;
            yAxisAdjusted = false;

            // 重置坐标轴范围到初始值
            initialXAxisMin = 0;
            initialXAxisMax = 10000;
            currentYAxisMin = initialYAxisMin;
            currentYAxisMax = initialYAxisMax;

            myChart.setOption({
                xAxis: {
                    min: initialXAxisMin,
                    max: initialXAxisMax
                },
                yAxis: {
                    min: currentYAxisMin,
                    max: currentYAxisMax,
                    interval: 20000
                }
            });

            // 重新显示示例数据
            setTimeout(showExampleData, 100);
        }
    }

    // 获取数据统计信息
    function getDataStats() {
        var stats = {};
        for (var seriesName in chartData) {
            var data = chartData[seriesName];
            if (data.length > 0) {
                var values = data.map(function (point) {
                    return point[1];
                });
                stats[seriesName] = {
                    count: data.length,
                    min: Math.min.apply(Math, values),
                    max: Math.max.apply(Math, values),
                    avg: values.reduce(function (a, b) {
                        return a + b;
                    }, 0) / values.length
                };
            }
        }
        return stats;
    }

    // 设置图表标题
    function setChartTitle(title) {
        var currentOption = myChart.getOption();
        currentOption.title[0].text = title;
        myChart.setOption(currentOption);
    }

    // 导出数据为JSON
    function exportData() {
        return JSON.stringify(chartData);
    }

    function importData(jsonData) {
        try {
            // 如果传入的是字符串，先解析
            const importedData = typeof jsonData === 'string' ? JSON.parse(jsonData) : jsonData;

            // 清除现有数据
            clearAllData();

            // 计算导入数据的X轴范围
            let maxX = -Infinity;
            let minX = Infinity;

            // 导入每个通道的数据
            for (const seriesName in importedData) {
                if (importedData.hasOwnProperty(seriesName)) {
                    const points = importedData[seriesName];

                    // 确保通道存在
                    if (!chartData[seriesName]) {
                        const colors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de'];
                        const colorIndex = Object.keys(chartData).length % colors.length;
                        addSeries(seriesName, colors[colorIndex], 'imported');
                    }

                    // 计算X轴范围
                    for (const point of points) {
                        const x = point[0];
                        if (x > maxX) maxX = x;
                        if (x < minX) minX = x;
                    }

                    setSeriesData(seriesName, points);
                }
            }

            // 更新X轴范围以适应导入的数据
            if (maxX > -Infinity && minX < Infinity) {
                const xRange = maxX - minX;
                initialXAxisMin = Math.max(0, minX - xRange * 0.1);
                initialXAxisMax = maxX + xRange * 0.1;

                const xAxisInterval = calculateXAxisInterval(initialXAxisMax);

                myChart.setOption({
                    xAxis: {
                        min: initialXAxisMin,
                        max: initialXAxisMax,
                        interval: xAxisInterval
                    }
                });
            }

            updateChart();
            console.log('数据导入完成');
            return true;
        } catch (error) {
            console.error('导入数据失败:', error);
            return false;
        }
    }

    console.log('波形图表初始化完成（优化版）');

    // 强制初始化图表事件处理
    setTimeout(() => {
        myChart.resize();
        console.log('图表事件处理已强制初始化');
    }, 1000);
</script>
</body>
</html>